<template>
  <Layout>
    <view class="profile_container">
      <!-- 头像区域 -->
      <view class="_avatar_section">
        <image class="_avatar" :src="userInfo.icon"></image>
        <view class="example_body">
          <uni-file-picker file-mediatype="all"  @select="handleSelect"   ref="files" :auto-upload="false">
            <div class="upload_avatar_button" @click="handleUpload"><i class="iconfont icon-uploda"></i> 更改頭像</div>
          </uni-file-picker>
        </view>
      </view>

      <!-- 功能按钮区域 -->
      <view class="function_buttons">
        <button type="default" class="btn_items" @click="goto('/pages/personal/baseInfo/index')">基本信息</button>
        <!-- <button type="default" class="btn_items">绑定帐号</button> -->
        <button type="default" class="bind_account_button btn_items" @click="goto('/pages/personal/bindAccount/index')">绑定帐号</button>
        <button type="default" class="btn_items" @click="goto('/pages/personal/changePassword/index')">更改密碼</button>
        <button type="default" class="btn_items" @click="logout">登出</button>
      </view>
    </view>
  </Layout>
</template>

<script>
import uniFilePicker from '@/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue'
import { removeToken, removeUser } from '@/utils/auth.js'
import { mapGetters } from 'vuex'
import { updateUserAvatar, getUserInfo } from '@/api/user.js'
export default {
  components: {
    uniFilePicker
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'avatarUrl'
    ])
  },
  methods: {
    goto(url) {
			uni.navigateTo({
				url:url
			})
		},
    changeAvatar() {
      console.log('更换头像');
      // 在这里添加更换头像的逻辑
    },
    handleUpload(){
      // this.$refs.files.upload()
    },
    handleSelect(e){
      uni.showLoading({
          title: '上传中...', // 显示的提示文字
          mask: true // 是否显示透明蒙层，防止触摸穿透
      });
      const file = e.tempFiles[0]
      if (!file) return
       const filePath = file.tempFilePath || file.path || file.url
      updateUserAvatar(filePath).then(res=>{
        const {data} = res
        this.$store.commit('SET_AVATAR_URL', data)
        getUserInfo().then(res=>{
          this.$store.commit('SET_USERINFO', res.data)
          uni.hideLoading();
        })
      }).catch(err =>{
        uni.showToast(err.message)
        uni.hideLoading();
      })
    },
    logout(){
      this.$store.commit('SET_USERINFO', '')
      this.$store.commit('SET_TOKEN', '')
      removeToken()
      removeUser()
      uni.navigateTo({ url: "/pages/login/index" });
    }
  }
}
</script>

<style lang="scss" scoped>
.profile_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  margin-top: 60rpx;

  ._avatar_section {
    margin-bottom: 60rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    ._avatar {
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      margin-bottom: 20rpx;
    }

    .example_body {
      margin-top: 60rpx;
      .upload_avatar_button{
        color: #737373;
        border: 1rpx solid #dcdbdc;
        border-radius: 10rpx;
        padding: 20rpx 40rpx;
        background-color: #fff;
        i{
          margin-right: 10rpx;
        }
      }
    }
  }

  ::v-deep.uni-file-picker__lists{
    display: none;
  }

  .function_buttons {
    width: 100%;
    max-width: 500rpx;

    .btn_items {
      width: 100%;
      padding: 12rpx 0;
      margin-bottom: 30rpx;
      background-color: #fff;
      border: 1rpx solid #eaeaea;
      font-size: 24rpx;
      cursor: pointer;
    }

    .basic_info_button { /* 可以在这里对特定按钮进行自定义 */
    }

    .bind_account_button {
    }

    .change_password_button {
    }

    .logout_button {
    }
  }
}
</style>